define('components/BannerImage/Pc', [
    'utils/FileUpload',
    'utils/ImageClip',
    'utils/fetchEnhancer',
    'components/BannerImage/pc.css'
], function(FileUpload, ImageClip, fetch){

var Banner = function() {
    this.container = null;

    this.canvasWrapper = null;
    this.uploadBtnWrapper = null;

    this.fileUpload = null;
    this.imageClip = null;
    this.minWidth = 1200;
    this.minHeight = 200;

    this.onChange = null;
    this.onSuccess = null;

    this.template =
`<div class="bi-wrapper">
    <span class="bi-close" data-role="close"></span>
    <div class="bi-canvas" style="display: none">
        <span class="bi-btn bi-btn-dander" data-role="reselect">重新选择</span>
        <span class="bi-btn" data-role="ok">确定</span>
    </div>
    <div class="bi-upload-btn" ><input type="file" class="bi-upload-file" id="bi-upload-file"/></div>
</div>`;


};
Banner.prototype = {
    constructor: Banner,
    initEvent: function() {
        var _self = this;
        this.container.onclick = function(e) {
            var t = e.target;
            var role = t.getAttribute('data-role');

            if('close' === role) {
                if(null !== _self.onChange) {
                    _self.onChange(null);
                }

                _self.destroy();
                return;
            }

            if('reselect' === role) {
                _self.imageClip.destroy();
                _self.imageClip = null;
                _self.canvasWrapper.style.display = 'none';
                _self.uploadBtnWrapper.style.display = 'block';

                if(null !== _self.onChange) {
                    _self.onChange(null);
                }
                return;
            }

            if('ok' === role) {
                _self.clipEnd();
            }
        };
    },
    clipEnd: function() {
        if(this.uploading) {
            return;
        }
        this.uploading = true;

        let _self = this;
        let base64 = this.imageClip.getPreview('image/jpeg', 0.8);
        fetch('/api/account/editbanner', {
            method: 'POST',
            body: 'banner=' + base64
        }).then((res) => {
            if(0 === res.status) {
                _self.uploading = false;

                if(null !== _self.onSuccess) {
                    _self.onSuccess(res.data);
                }

                _self.destroy();
            }
        });
    },
    initUpload: function() {
        let _self = this;

        this.fileUpload = new FileUpload({
            id: 'bi-upload-file',
            fileSizeLimit: 1024 * 1024 * 2,
            accept: 'image/jpg, image/jpeg'
        });

        // event
        this.fileUpload.fileQueuedHandler = (file) => {
            _self.checkDimensions(file, (res) => {
                _self.uploadBtnWrapper.style.display = 'none';
                _self.canvasWrapper.style.display = 'block';

                _self.imageClip = new ImageClip({
                    canvasWidth: 1000,
                    canvasHeight: 220,
                    maskStyle: 'rgba(0, 0, 0, .8)',
                    clipWidth: _self.minWidth,
                    clipHeight: _self.minHeight
                });
                _self.imageClip.onChange = () => {
                    if(null !== _self.onChange) {
                        _self.onChange(_self.imageClip);
                    }
                };
                _self.imageClip.render(_self.canvasWrapper, res);
            });
        };
    },
    checkDimensions: function(file, callback) {
        let _self = this;
        let img = new Image();
        let r = new FileReader();

        img.onload = (e) => {
            if(img.width < _self.minWidth || img.height < _self.minHeight) {
                XUI.dialog.alert('图片尺寸太小，至少为 ' + _self.minWidth + ' * ' + _self.minHeight);

            } else {
                callback(r.result);
            }

            img.onload = null;
            img = null;
            r.onload = null;
            r = null;
        };

        r.onload = (e) => {
            img.src = r.result;
        };
        r.readAsDataURL(file.nativeFile);
    },
    destroy: function() {
        if(null !== this.imageClip) {
            this.imageClip.destroy();
        }

        this.canvasWrapper = null;
        this.uploadBtnWrapper = null;
        this.fileUpload = null;
        this.imageClip = null;
        this.onChange = null;
        this.onSuccess = null;

        this.container.onclick = null;
        this.container.innerHTML = '';
    },
    render: function(container) {
        this.container = container;

        this.container.innerHTML = this.template;

        this.canvasWrapper = this.container.querySelector('.bi-canvas');
        this.uploadBtnWrapper = this.container.querySelector('.bi-upload-btn');

        this.initEvent();
        this.initUpload();
    }
};
return Banner;

});
